<template>
    <div class="w100h100 p-2">
        <div class="mb10px">
            <div class="table-search-left">
                <el-input v-model="searchParams.deviceMac" style="width: 180px;" placeholder="请输入设备号查询" clearable />
                <el-input v-model="searchParams.deviceName" style="width: 180px;" class="mlr10px" placeholder="请输入设备名称查询"
                    clearable />
                <el-button v-hasPermi="['system:shieldDevice:query']" icon="Search"
                    @click="handleSizeChange()">搜索</el-button>
                <el-button v-isSuperAdmin v-hasPermi="['system:shieldDevice:add']" icon="Plus" @click="addDevice()">
                    添加
                </el-button>
            </div>
            <div class="table-search-right"></div>
        </div>
        <el-table height="calc(100% - 114px)" :data="tableData">
            <el-table-column label="序号" type="index" :index="(searchParams.pageNum - 1) * searchParams.pageSize + 1"
                align="center" width="80" />
            <el-table-column label="盾构机设备号" prop="deviceMac" align="center" />
            <el-table-column label="盾构机设备名称" prop="deviceName" align="center" />
            <el-table-column label="备注" prop="remark" align="center" />
            <el-table-column v-isSuperAdmin label="操作" align="center" width="210">
                <template #default="{ row }">
                    <el-tooltip v-hasPermi="['system:shieldDevice:edit']" effect="dark" content="编辑" placement="top">
                        <el-icon class="operation-icon" @click="modifyDevice(row)">
                            <Edit />
                        </el-icon>
                    </el-tooltip>
                    <el-tooltip v-hasPermi="['system:shieldDevice:remove']" effect="dark" content="删除" placement="top">
                        <el-icon class="operation-icon" @click="deleteDevice(row)">
                            <Delete />
                        </el-icon>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-model:total="total" v-model:page="searchParams.pageNum" v-model:limit="searchParams.pageSize"
            @pagination="getTableData()" />

        <el-dialog v-model="showDialog" :title="title" width="500px" @close="close()">
            <div class="form-container">
                <el-form ref="refForm" :model="form" :rules="formRules" label-width="auto" label-position="left">
                    <el-form-item label="盾构机设备号：" prop="deviceMac">
                        <el-input v-model="form.deviceMac" placeholder="请输入盾构机设备号" clearable />
                    </el-form-item>
                    <el-form-item label="盾构机设备名称：" prop="deviceName">
                        <el-input v-model="form.deviceName" placeholder="请输入盾构机设备名称" clearable />
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input v-model="form.remark" placeholder="请输入备注" clearable />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <el-button @click="showDialog = false;">取消</el-button>
                <el-button type="primary" @click="submitForm()">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import type { ElForm } from 'element-plus';
import * as myHttp from '@/api/shieldMachine';
import { table } from 'console';

type FormInstance = InstanceType<typeof ElForm>;

const formRules = {
    deviceMac: [{ required: true, message: '请输入盾构机设备号', }],
    deviceName: [{ required: true, message: '请输入盾构机设备名称', }],
};

const searchParams = reactive({ deviceMac: '', deviceName: '', pageNum: 1, pageSize: 20, });
const total = ref(0);
const tableData = ref([]);
const refForm = ref<FormInstance>();
const showDialog = ref(false);
const title = ref('');
const form = ref({ id: '', deviceMac: '', deviceName: '', remark: '', });

const addDevice = async () => {
    title.value = '添加设备';
    showDialog.value = true;
};

const modifyDevice = async (row: any) => {
    const { id, deviceMac, deviceName, remark, } = row;
    form.value = { id, deviceMac, deviceName, remark, };
    title.value = '修改设备信息';
    showDialog.value = true;
};

const deleteDevice = (row: any) => {
    ElMessageBox.confirm(`确定要删除本条数据吗？`, {
        title: '温馨提示',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
    }).then(async () => {
        const res = await myHttp.deleteShieldMachine(row.id);
        if (res.code == 200) {
            ElMessage.success('删除成功');
            getTableData();
        }
    });
};

const submitForm = () => {
    refForm.value?.validate(async () => {
        if (!form.value.id) {
            const res = await myHttp.addShieldMachine(form.value);
            if (res.code == 200) {
                showDialog.value = false;
                ElMessage.success('添加成功');
                getTableData();
            }
        } else {
            const res = await myHttp.modifyShieldMachine(form.value);
            if (res.code == 200) {
                showDialog.value = false;
                ElMessage.success('修改成功');
                getTableData();
            }
        }
    });
};

const handleSizeChange = () => {
    searchParams.pageNum = 1;
    getTableData();
};

const getTableData = async () => {
    const res = await myHttp.getShieldMachineList(searchParams);
    if (res.code == 200) {
        total.value = res.total;
        tableData.value = res.rows;
        if (tableData.value.length) {
            myHttp.getShieldGuidanceParametersList({ shieldId: tableData.value[0].id, });
        }
    }
};

const close = () => {
    form.value = { id: '', deviceMac: '', deviceName: '', remark: '', };
    refForm.value?.resetFields();
};

onMounted(() => {
    getTableData();
});
</script>

<style lang="less" module></style>
